import { Link, Contribution } from '@brillout/docpress'
import { BlogHeader } from '../../blog/BlogHeader'

<BlogHeader authors={['brillout']} date={new Date('2024-08-01')} />

What we have been working on in July 2024.

<Contribution>
  We are [looking for sponsors](https://github.com/vikejs/vike/issues/1350).
</Contribution>

**Fixes:** `40`

**Features**

<Link href="#improved-head-management" /><br/>
<Link href="#vike-react-apollo" /><br/>
<Link href="#vike-node" /><br/>
<Link href="#improved-url-handling" /><br/>
<Link href="#injectscriptsat" /><br/>
<Link href="#clientonly" /><br/>
<Link href="#new-bati-integrations" /><br/>

**Project**

<Link href="#internal-refactoring" /><br/>
<Link href="#new-marketing" /><br/>

**See also**

[`vike` > `CHANGELOG.md`](https://github.com/vikejs/vike/blob/main/CHANGELOG.md)  
[`vike-react` > `CHANGELOG.md`](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)  
[`vike-vue` > `CHANGELOG.md`](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/CHANGELOG.md)  
[`vike-solid` > `CHANGELOG.md`](https://github.com/vikejs/vike-solid/blob/main/CHANGELOG.md)  


## Improved head management

We've made a ton of improvements to `<head>` management when using `vike-{react,vue,solid}`.

See <Link href="/head-tags" />.

> It's already implemented and released for `vike-react`. For `vike-{vue,solid}` the ETA is this week (first August days).

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>



## `vike-react-apollo`

We released a new
[Vike extension `vike-react-apollo`](https://github.com/vikejs/vike-react/tree/main/packages/vike-react-apollo#readme)
to seamlessly use <Link href="/vike-react">`vike-react`</Link> with GraphQL Apollo.

Like other extensions, `vike-react-apollo` is lightweight (only `202` lines of code!). This means that, instead of using `vike-react-apollo`, you can easily integrate GraphQL Apollo (or any other GraphQL client) yourself.

> Both `vike-react` and ` vike-react-apollo` are lightweight thanks to the heavy lifting done by Vike and [`react-streaming`](https://github.com/brillout/react-streaming). This showcases <Link href="/why">Vike's philosophy of having a sturdy core with lightweight extensions</Link>.

<Contribution>
  Author: [`nitedani`](https://github.com/nitedani)
</Contribution>


## `vike-node`

One fundamental feature missing for releasing Vike `1.0.0` is being able to use Vite to transpile server code such as Express.js or Hono code ([#562](https://github.com/vikejs/vike/issues/562)).

We released a [new package `vike-node`](https://github.com/vikejs/vike-node) for that purpose.

> It's somewhat experimental so expect issues here and there. We may built it directly into Vike (instead of being a separate package).

<Contribution>
  Author: [`nitedani`](https://github.com/nitedani)
</Contribution>


## Improved URL handling

Vike exports a new <Link href="/modifyUrl">`modifyUrl()` utility</Link>, which is convenient for internationalization as shown in the example at <Link href="/i18n" />.

Also, `pageContext.urlParsed` has new properties:

```
http://localhost:3000/some-base-url/hello/s%C3%A9bastien
```
```js
{
  pathname: '/hello/sébastien',
  pathnameOriginal: '/some-base-url/hello/s%C3%A9bastien',
  search: {},
  searchAll: {},
  searchOriginal: null,
  hash: '',
  hashOriginal: null,
  origin: 'http://localhost:3000',
  // Without Base URL, doesn't decode escaped characters// [!code ++]
  href: 'http://localhost:3000/hello/s%C3%A9bastien',// [!code ++]
  protocol: 'http://',// [!code ++]
  hostname: 'localhost',// [!code ++]
  port: 3000// [!code ++]
}
```

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## `injectScriptsAt`

The <Link href="/injectScriptsAt">new `injectScriptsAt` setting</Link> allows you to control where Vike injects scripts.

> It was already possible with <Link href="/injectFilter">`injectFilter()`</Link> but only partially: `injectScriptsAt` allows you to inject scripts at the beginning of the <Link href="/streaming">HTML stream</Link>. It's also simpler to use than `injectFilter()` and it can be used by Vike extensions.

<Contribution>
  Author: [`phonzammi`](https://github.com/phonzammi)
</Contribution>


## `clientOnly()`

Not only Vue and Solid users, but now also React users can use the <Link href="/clientOnly">`clientOnly()` helper</Link> which has the same functionality as the `<ClientOnly>` wrapper (now deprecated) but with a much improved DX.

<Contribution>
  Author: [`nitedani`](https://github.com/nitedani)
</Contribution>


## New Bati integrations

New [Bati](https://batijs.dev) integrations:
 - [Cloudflare](https://pages.cloudflare.com)

<Contribution>
  Author: [`phonzammi`](https://github.com/phonzammi), [`magne4000`](https://github.com/magne4000)
</Contribution>


## Internal refactoring

We continuously work on internal improvements. They aren't visible to the user but they have a foundational impact on Vike and its ecosystem.

For example:
 - We are making progress on [Universal Middlewares](https://github.com/magne4000/universal-middleware), in order to enable Vike extensions to automatically and seamlessly integrate server middlewares.
   <Contribution>
     Author: [`magne4000`](https://github.com/magne4000)
   </Contribution>
 - We refactored the stream chunk orchestration logic of [`react-streaming`](https://github.com/brillout/react-streaming) (which powers `vike-react` and other projects). [The logic is now crystal clear and robust](https://github.com/brillout/react-streaming/commit/c052e72f33254fd6deb474cd784fa4cee07b6e92#diff-52301d8ceb8d9165f156883711407609a842701365fc32f512083f81c7c02dc4) (it was somewhat messy and buggy).
   <Contribution>
     Authors: [`nitedani`](https://github.com/nitedani), [`brillout`](https://github.com/brillout)
   </Contribution>
 - We [refactored Vike's URL handling](https://github.com/vikejs/vike/compare/63b1f5caf36ea125d7ecf5271f10d0d9065ac916..09420db329dbaaa9dfe6b900964ff158f8a6f1b3~). (The logic is now crystal clear with lots of explanatory comments.)
   <Contribution>
     Authors: [`brillout`](https://github.com/brillout)
   </Contribution>


## New marketing

We've been talking with the community to gather feedback for the upcoming new marketing. For example:
 - [Discussions about Vike + Vue](https://www.reddit.com/r/vuejs/comments/1dsucor/vike_june_releases/)
 - [Discussions about Vike's upcoming new tagline](https://x.com/brillout/status/1815350370740105507)

<Contribution>
  Author: [`brillout`](https://github.com/brillout)
</Contribution>


## See also

- [`vike` > `CHANGELOG.md`](https://github.com/vikejs/vike/blob/main/CHANGELOG.md)
- [`vike-react` > `CHANGELOG.md`](https://github.com/vikejs/vike-react/blob/main/packages/vike-react/CHANGELOG.md)
- [`vike-vue` > `CHANGELOG.md`](https://github.com/vikejs/vike-vue/blob/main/packages/vike-vue/CHANGELOG.md)
- [`vike-solid` > `CHANGELOG.md`](https://github.com/vikejs/vike-solid/blob/main/CHANGELOG.md)
- <Link href="/releases" />
